<template>
  <div class="comment">
    <h3 class="duanyu">观众热评</h3>
    <div class="contents" v-for="(item,index) in comment" :key="index">
      <!-- 标题  头像-->
      <van-row type="flex" class="header">
        <van-col span="3">
          <van-image round width="30px" style=" border: 1px solid #999;" height="30px" :src="item.avatarUrl" />
        </van-col >
        <van-col span="19">
          <p  class="van-ellipsis">
          <span :class="item.userLevel>=2?classA:classB"  >{{ item.nick }}</span> 
        
            <span class="city">{{ item.cityName }}</span>
           <span v-if="item.tagList"  style="position: relative;top:4px;transform: scale(.5);display:inline-block;height:6px;"><van-tag  style="height:12px;fontSize:12px" text-color="#f6f6f6" color="#3588da"  type="primary">购票</van-tag></span>
          </p>
          <p class="van-ellipsis">
            <van-rate color="#ffd21e" v-model="item.score" size="7" />
          <span></span>  <span class="score">{{ item.score }}分 </span>
          </p>
        </van-col>
        <van-col span="2">
  </van-col>
      </van-row>
      <!-- 评论内容 -->
      <van-row type="flex" class="content">
        <van-col span="3"></van-col>

        <van-col span="19">
          <p>
            {{ item.content }} <span class="timer">{{ item.time | dateFormat }}0</span>
          </p></van-col
        >
        <van-col class="s" span="2">        <span  class="good"><van-icon name="good-job-o" /><span class="conut"></span></span
        ></van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "VueMovieComment",
  props: {
    comment: {
      type: Array,
    },
  },
  data() {
    return {
      value: 3,
      classA:'classa',
      classB:'classb',
    }
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>
.sex{color:#aaa;


}
.classa{color: red;}
.classb{color: #000;}
.comment {
  background-color: #fff;
  .timer {
   
    font-size: 12px;
  }
  .score {
    font-size: 12px;
    color: #333;
  }
  .duanyu {
    padding-left: 15px;
  }
  .contents {
    margin-top: 15px;
  }
  .header {
    height: 40px;
    .van-col:nth-child(1),
    .van-col:nth-child(3) {
      text-align: center;
    }
    .van-col:nth-child(2) {
      p {
        height: 15px;
        line-height: 15px;
        margin: 3px 0;
        padding: 0;
        font-size: 12px;
        span {
          margin-left: 3px;
        }
        .city {
          color: #777;
        }
      }
    }
    .conut {
      color: #555;
      font-size: 12px;
    }
  }
  .content {
    
   .s{position: relative;
      .good{position: absolute;
       left: 50%;
    bottom: 0px;
    transform: translateX(-50%);
   }
   }
    .van-col:nth-child(2) {
      padding:0 5px 0 5px;
      border-radius: 5px;
      p {
      
        font-size: 13px;
      font-weight: 350;
        line-height: 1.5rem;
        .timer{color:#ddd}
      }
    }
  }
}
.van-ellipsis{overflow: visible!important;}
</style>